<template>
  <div class="homepage">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" v-if="cimgs.length>0" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="v in cimgs" :key="v.id" @click.native="swipdetail(v.musicId)">
            <img :src="v.carouselUrl" alt="">
          </van-swipe-item>
        </van-swipe>
        <!-- 用户列表 -->
        <div class="Shop">
            <div v-for="(v, index) in list" :key="index" class="shop">
              <img :src="v.avaUrl" @click="detail(v.id)">
              <p class="pname">{{ v.name }}</p>
              <p>{{ v.phone }}</p>
              <!-- <button @click="add(v)">加入购物车</button> -->
              <div>
                
              <van-button class="gou_btn" @click="add(v)" type="warning"><img class="gou_img" src="../assets/加入购物车 .png" alt="">加入购物车</van-button>
              </div>
              
            </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="Shop">
          <div v-for="(v, index) in list" :key="index" class="shop">
            <img :src="v.avaUrl" @click="detail(v)">
            <p>{{ v.name }}</p>
            <p>{{ v.phone }}</p>
            <button @click="add(v)">加入购物车</button>
          </div>
      </div>
    </van-list> -->


    
      
  </div>
</template>

<script>
import url from '../tools/url'
export default {
  name: "Homepage",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      list: [],
      loading: false,
      finished: false,
      pageNo:1,
      count: 0,
      isLoading: false,
      cimgs:[],
    };  
  },
  methods: {
    // 跳转到轮播图详情页
    swipdetail(id){
      this.$router.push({
        path:"/swipdetail",
        query:{musicId:id},
      });
    },
    //下拉加载
    onRefresh(){
      console.log("下拉加载");
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pageNo}&pageSize=10`;
      this.axios.post("api3"+url.LIST,str).then(res=>{
        if(res.data.code == 200){
          this.isLoading = false ;
          this.list = res.data.data.list.concat(this.list) ; 
          if(res.data.data.isLastPage){
            //如果返回的数据是最后一页，停止加载
            this.finished = true ;
          }
          this.pageNo++;
        }
      })
    },
    //加载更多
    onLoad(){
      console.log("加载更多");
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pageNo}&pageSize=10`;
      this.axios.post("api3"+url.LIST,str).then(res=>{
        if (res.data.code == 200) {
          //加载状态结束
          this.loading = false;
          this.list = this.list.concat(res.data.data.list);
          this.pageNo++;
          if(res.data.data.isLastPage){
            //如果返回的数据是最后一页，停止加载
            this.finished = true ;
          }
        }else{
            console.log("登录超时");
            this.$router.push("/login")
        }
      })
    },
    add(v){    
      this.$store.commit("addp",v);
    },
    detail(v){
      this.$router.push({
        path:"/detail",
        query:{
          v:v
        }
      })
    }
  },
  mounted() {
    // 轮播图
    var token = sessionStorage.getItem("token");
    var str = `token=${token}`;
    this.axios.post("api3"+url.CAROUSEL,str).then(res=>{
      if(res.data.code == 200){
        this.cimgs = res.data.data;
      }else{
        this.$router.push("/login");
      }
    })

    // var token = sessionStorage.getItem("token");
    // var str = `token=${token}&pageNo=1&pageSize=10`;
    // this.axios.post("https://bufferc.store:8443/user/getUserList",str).then(res=>{
    //   console.log(res);
    //   res.data.data.list.forEach((shop,index,arr)=>{
    //     shop.count = 1;
    //     shop.isCheck = false;
    //   })
    //   this.list = res.data.data.list;
    // })
    // var list = [
      // { pname: "华为手机",pid:"1001" , price: 2999, pimg: require("../assets/1.jpg") },
      // { pname: "小米手机",pid:"1002" , price: 2999, pimg: require("../assets/2.png") },
      // { pname: "苹果手机",pid:"1003", price: 2999, pimg: require("../assets/3.png") },
      // { pname: "vivo手机",pid:"1004" , price: 2999, pimg: require("../assets/1.jpg") },
      // { pname: "oppo手机",pid:"1005" , price: 2999, pimg: require("../assets/2.png") },
      // { pname: "诺基亚手机",pid:"1006" , price: 2999, pimg: require("../assets/3.png") },
    // ];
    // list.forEach((shop,index,arr)=>{
    //   shop.count = 1;
    //   shop.isCheck = false;
    // })
    
  },
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

img {
  width: 100%;
}
.shop {
  width: 45%;
  border: 1px solid #000;
  margin-top: 5px;
}
.Shop{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.homepage{
  margin-top: 45px;
  margin-bottom: 62px ;
}
.gou_img{
  width: 30px;
  height: 40px;
  margin:-16px 2px -16px -16px;
}
.gou_btn{
  height: 38px;
  border-radius: 20px;
}
.pname{
  color: red;
}
</style>
